<template>
  <div class="hs-select">
    <span v-if="!isVisible">{{value}}</span>
    <div v-else :style="style" class="hs-select-pick" @mousedown="stopMousedownPropagation">
      <el-select v-model="value" size="mini" :popper-append-to-body="false" style="width: 100%;">
        <el-option v-for="item in data" :key="item.label" :label="item.label" :value="item.label"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import {BaseEditorComponent} from '@handsontable/vue'

console.info(BaseEditorComponent)

export default {
  name: 'hs-select',
  cnName: 'handsometable - 选择器',
  extends: BaseEditorComponent,
  props: {
    data: Array
  },
  data() {
    return {
      isVisible: false,
      value: '',
      style: {
        position: 'absolute'
      }
    }
  },
  methods: {
    init() {
    },
    stopMousedownPropagation(e) {
      e.stopPropagation();
    },
    prepare(row, col, prop, td, originalValue, cellProperties) {
      BaseEditorComponent.options.methods.prepare.call(this, row, col, prop, td, originalValue, cellProperties);

      if (!document.body.contains(this.$el)) {
        document.body.appendChild(this.$el);
      }

      const tdPosition = td.getBoundingClientRect();

      // As the `prepare` method is triggered after selecting
      // any cell, we're updating the styles for the editor element,
      // so it shows up in the correct position.
      this.style.left = `${tdPosition.left + window.pageXOffset}px`;
      this.style.top = `${tdPosition.top + window.pageYOffset}px`;
      this.style.width = `${tdPosition.width}px`
      this.value = originalValue
    },
    setLowerCase() {
      this.setValue(this.value.toLowerCase());
      this.finishEditing();
    },
    setUpperCase() {
      this.setValue(this.value.toUpperCase());
      this.finishEditing();
    },
    open() {
      this.isVisible = true
    },
    close() {
      console.info('close', this.value)
      this.isVisible = false
    },
    setValue(value) {
      console.info('setValue:', value)
      this.value = value;
    },
    getValue() {
      this.$emit('change', this.value)
      return this.value;
    }
  },
  watch: {
    value() {
      console.info('watch', this.value)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.hs-select {

  &-pick {
    font-size: 13px;
    height: 22px;
    line-height: 21px;
    padding: 0;
  }

  ::v-deep {
    .el-select .el-input__inner {
      border-radius: 0;
    }
  }
}
</style>
